﻿<!DOCTYPE html>
<html>
<head>
  <title>Pie Charts</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <meta name="description" content="GoJS nodes containing simple pie charts, each slice showing a tooltip." />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="../release/go.js"></script>
  <script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
  <script id="code">
    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            nodeTemplate:
              $(go.Node, "Vertical",
                $(go.Panel,
                  new go.Binding("itemArray", "slices"),
                  {
                    itemTemplate:
                      $(go.Panel,
                        $(go.Shape,
                          { fill: "lightgreen", isGeometryPositioned: true },
                          new go.Binding("fill", "color"),
                          new go.Binding("geometry", "", makeGeo)),
                        {
                          toolTip:
                            $("ToolTip",
                              $(go.TextBlock, { margin: 4 },
                                new go.Binding("text", "", function(data) {
                                  return data.color + ": " + data.start +
                                    " to " + (data.start + data.sweep);
                                }))
                            )
                        }
                      )
                  }),
                $(go.TextBlock,
                  new go.Binding("text"))
              ),
            model: $(go.GraphLinksModel,
              {
                copiesArrays: true,
                copiesArrayObjects: true,
                nodeDataArray:
                  [  // node data
                    {
                      key: 1,
                      text: "full circle",
                      slices: [
                        { start: -30, sweep: 60, color: "white" },
                        { start: 30, sweep: 300, color: "red" }
                      ]
                    },
                    {
                      key: 2,
                      text: "partial circle",
                      slices: [
                        { start: 0, sweep: 120, color: "lightgreen" },
                        { start: 120, sweep: 70, color: "blue" },
                        { start: 250, sweep: 20, color: "yellow" }
                      ]
                    }
                  ],
                linkDataArray:
                  [  // link data
                    { from: 1, to: 2 }
                  ]
              })
          }
        );

      function makeGeo(data) {
        // this is much more efficient than calling go.GraphObject.make:
        return new go.Geometry()
          .add(new go.PathFigure(50, 50)  // start point
            .add(new go.PathSegment(go.PathSegment.Arc,
              data.start, data.sweep,  // angles
              50, 50,  // center
              50, 50)  // radius
              .close()));
      }
    }
  </script>
</head>
<body onload="init()">
  <div id="sample">
    <div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 500px;"></div>
    <p>
      Each node has a Position Panel whose <a>Panel.itemArray</a> is data bound to the "slices" property of the node data.
      That "slices" property is an Array of data objects; for each item the <a>Panel.itemTemplate</a> produces a Shape whose
      <a>Shape.geometry</a> is computed using a conversion function to generate a pie-shaped slice given a start angle
      and a sweep angle from the item data.
      Note that <a>Shape.isGeometryPositioned</a> is true to make sure all of the Shapes are positioned
      by their computed geometries, independent of any stroke width.
      Each slice Panel also has a tooltip showing some information.
    </p>
    <p>
      For more sophisticated charts within nodes, see the <a href="canvases.html">Canvas Charts</a> sample.
    </p>
  </div>
</body>
</html>
